<template>
	<view>
		<view v-if="authTiktokInfo" class="authWrapper" >
			<view class="left">
				<image :src="appAvatar" class="avatarWrapper" mode=""></image>
				<view class="infoWrapper">
					<view class="titleWrapper">
						{{appNickName}}
					</view>
					<view class="timeWrapper">
						授权时间：{{authTiktokAuthTime||""}}
					</view>
				</view>
			</view>
			<view class="right" @click="onShowPopup">
				解绑
			</view>
		</view>
		<view v-else class="noAuthWrapper">
			<u-empty
				style="margin-top: 20vh;"
			    mode="history"
				width="300rpx"
				height="300rpx"
				textSize="24rpx"
				icon="/static/image/icon_empty_history.png"
				text="未绑定抖音号"
			>
			</u-empty>
			<view class="btnWrapper" @click="gotoAuthTiktokScope">
				去绑定
			</view>
		</view>
		
		<u-popup :show="isShowPopup" @close="close"  round="30rpx">
			<view class="tipWrapper">
				<u-icon size="40rpx" color="#222" class="close" name="close" @click="close"></u-icon>
				<view class="title">
					解绑后无法获取抖音作品及私信数据
				</view>
				<view class="text">
					如果需要再次使用此服务需要重新进行授权
				</view>
				<view class="content">
					1. 打开抖音，进入「我的」
				</view>
				<view class="content">
					2. 进入「设置页面」
				</view>
				<view class="content">
					3. 进入「账号与安全」
				</view>
				<view class="content">
					4. 进入「授权管理」选择梦维营销进行解绑
				</view>
				<view class="btnWrapper" @click="onOpenTiktok">
					打开抖音进行解绑
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null

	export default {
		data() {
			return {
				isShowPopup: false
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,

				appAvatar: state => state.userInfo.appAvatar,
        authTiktokAuthTime: state => state.userInfo.authTiktokAuthTime,
				appNickName: state => state.userInfo.appNickName,
				authTiktokInfo: state => state.userInfo.authTiktokInfo,
				authTiktokPermission: state => state.userInfo.authTiktokPermission,
			}),
		},

		onLoad(options) {
			that = this;
			
		},
		onReady() {

		},


		onShow() {
			if (this.authTiktokInfo){
				this.getUserInfo()
			}
		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
			gotoAuthTiktokScope(){
				uni.navigateTo({
					url:"/pages/shop/tiktok/authTiktokScope"
				})
			},
			close(){
				this.isShowPopup = false
			},
			onShowPopup(){
				this.isShowPopup = true
			},
			onOpenTiktok(){
				var url = "snssdk1128://"
				plus.runtime.openURL(url, function(res) {
					console.log("openURL:", res);
				});
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					console.log("getUserInfo", res)
					if (res.success) {
						that.setUserInfo(res.data)
					}
				}).catch(err => {
			
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss">
	.tipWrapper{
		width: 100%;
		padding: 40rpx;
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		.close{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.title{
			font-size: 32rpx;
			color: #222;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
		.text{
			font-size: 24rpx;
			color: #888;
			line-height: 60rpx;
		}
		.content{
			width: 100%;
			margin-top: 25rpx;
			padding-left: 15rpx;
			color: #444;
			font-size: 24rpx;
			line-height: 45rpx;
		}
		.btnWrapper{
			margin-top: 60rpx;
			width: 550rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #17f;
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 40rpx;
		}
	}
	
	.authWrapper{
		display: flex;
		align-items: center;
		width: 700rpx;
		margin-top: 30rpx;
		margin-left: 25rpx;
		padding: 30rpx;
		background-color: #ffffff;
		
		.left{
			display: flex;
			align-items: center;
			.avatarWrapper{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.infoWrapper{
				width: 400rpx;
				.titleWrapper{
					font-size: 28rpx;
					color: #222;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}
				.timeWrapper{
					color: #888;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
		}
		.right{
			border: 1px #f6f6f6 solid;
			border-radius: 30rpx;
			height: 60rpx;
			width: 130rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			text-align: center;
			color: #444;
		}
	}
	
	.noAuthWrapper{
		width: 100vw;
		display: flex;
		align-items: center;
		flex-direction: column;
		.btnWrapper{
			margin-top: 80rpx;
			width: 350rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			background-color: #17f;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>